<template>
  <div class="container" :style="{ height: headerHeight }">
    <div class="header" :style="{ top: statusH }">
      <i v-if="whiteBack && !leftText" class="back-btn__white" @click="doBack"></i>
      <i v-if="!whiteBack && !leftText" class="back-btn" @click="doBack"
        :style="{ background: `url(${backIcon})` }"></i>
      <div class="title">{{ title }}</div>
      <img v-if="centerImg" class="center-img" :src="centerImg" />
      <i v-if="blackShare && !rightText" class="share-btn__black" @click="doShare"></i>
      <i v-if="whiteShare && !rightText" class="share-btn__white" @click="doShare"></i>
      <i v-if="shareIcon && !rightText" class="share-btn" @click="doShare"
        :style="{ background: `url(${shareIcon})` }"></i>
      <div v-if="rightText" @click="doRightClick" class="right-text">{{ rightText }}</div>
      <div v-if="leftText" @click="doLeftClick" class="left-text">{{ leftText }}</div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { statusBarHeight } from "@/../utils";
import { getUrlParams } from "../utils";
import blackBack from "@/assets/images/black_back@3x.png"
defineProps({
  headerHeight: String,   // 必传
  title: {
    type: String,
    default: '',
  },
  rightText: {
    type: String,
    default: '',
  },
  leftText: {
    type: String,
    default: '',
  },
  backIcon: {
    type: String,
    default: blackBack,
  },
  shareIcon: {
    type: String,
    default: '',
  },
  whiteBack: {
    type: Boolean,
    default: false,
  },
  whiteShare: {
    type: Boolean,
    default: false,
  },
  blackShare: {
    type: Boolean,
    default: false,
  },
  centerImg: {
    type: String,
    default: '',
  }
})

// 获取状态栏高度
const statusH = ref('20')
statusH.value = statusBarHeight()

// 点击事件
let emit = defineEmits(['doBack', 'doShare', 'doRightClick', 'doLeftClick'])
const doBack = () => {
  console.log(">>>> 来源页 >>>>", getUrlParams("from"));
  emit('doBack', getUrlParams("from"))
}
const doShare = () => {
  emit('doShare')
}
const doRightClick = () => {
  emit('doRightClick')
}
const doLeftClick = () => {
  emit('doLeftClick')
}
</script>

<style scoped lang='less'>
.container {
  width: 100vw;
  background-color: #FFFFFF;

  .header {
    position: absolute;
    width: 100%;
    height: 44px;
    background-color: transparent;
    text-align: center;
    position: relative;
    line-height: 44px;
    font-size: 17px;
    font-weight: bold;

    .title {
      font-family: PingFangSC-Medium;
      font-size: 17px;
      color: #000000;
      letter-spacing: 0;
      text-align: center;
      font-weight: 500;
    }

    .center-img {
      width: 95px;
      height: 28px;
      position: absolute;
      left: 140px;
      top: 8px;
    }

    .back-btn {
      display: block;
      width: 24px;
      height: 24px;
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: url("@/assets/images/black_back@3x.png") no-repeat;
      background-size: 100% 100% !important;
    }

    .back-btn__white {
      display: block;
      width: 24px;
      height: 24px;
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: url("@/assets/images/white_back@2x.png") no-repeat;
      background-size: 100% 100% !important;
    }

    .share-btn {
      display: block;
      width: 24px;
      height: 24px;
      position: absolute;
      display: flex;
      align-items: center;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: no-repeat;
      background-size: 100% 100% !important;
    }

    .share-btn__black {
      display: block;
      width: 24px;
      height: 24px;
      position: absolute;
      display: flex;
      align-items: center;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: url("@/assets/images/black_share@3x.png") no-repeat;
      background-size: 100% 100% !important;
    }

    .share-btn__white {
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      display: flex;
      align-items: center;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: url("@/assets/images/white_share@3x.png") no-repeat;
      background-size: 100% 100% !important;
    }

    .right-text {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-family: PingFangSC-Regular;
      font-size: 15px;
      color: #000000;
      letter-spacing: 0;
      text-align: right;
      line-height: 24px;
      font-weight: 400;
    }

    .left-text {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
